<template>
<div class="detail">
  <!-- <headers></headers> -->
  <van-tabs v-model="active" scrollspy class="van-tabss">
    <van-tab>
      <template #title>
        <div class="header-l" @click='$router.push("/home")'>
          <a
            href="javascrpt:;"
            id="backBtn"
            style="width: 0.3rem; height: 0.3rem; "
          >
            <i class="backDetail" ></i>
          </a>
        </div>
      </template>
    </van-tab>

    <van-tab title="商品">
      <swipers :val="swiper_img"></swipers>
      <titles :val="show_val" :data="data"></titles>
    </van-tab>

    <van-tab title="详情">
      <detailimg></detailimg>
    </van-tab>

    <van-tab title="推荐">
      <shoplist></shoplist>
    </van-tab>

    
    <van-tab>
      <template #title>
        <div class="header-r">
          <a href="javascript:;" style="width: 0.3rem; height: 0.3rem; ">
            <i class="toHome"></i>
          </a>
          <a
            href="javascript:;"
            style="width: 0.3rem; height: 0.3rem;"
          >
            <i class="shareDetail"></i>
          </a>
        </div>
      </template>
    </van-tab>
  </van-tabs>
  
  <fnav @show_now="show_now"></fnav>
</div>
</template>

<script>
import Vue from 'vue';
import { Tab, Tabs } from 'vant';

import headers from '@/detail/header'
import swipers from '@/detail/swiper'
import titles from '@/detail/title'
import detailimg from '@/detail/detail_img'
import fnav from '@/detail/nav'
import shoplist from '@/detail/dshop_list'
import axios from 'axios'
import { mapState , mapActions } from 'vuex'
import 'assets/detail_top.css'

Vue.use(Tab);
Vue.use(Tabs);

export default {
  data(){
    return {
      show_val :"",
      data:"",
      swiper_img:[],
      product_list:[],
      list : ['商品' , '评价' , '详情' , '推荐'],
      active:0
    } 
  },
  computed:{
      ...mapState({
        products(state){
          return state.products.list
        }
      })
  },
  components:{
    headers,
    swipers,
    titles,
    detailimg,
    fnav,
    shoplist, 
  },
  mounted(){
    this.ajax()
  },
  methods: {
    ...mapActions('products' , ['setList']),
    show_now(val){
      this.show_val = val
    },
    ajax(){
      axios(`/special/goods/wap/${this.$route.query.itemId}`,{
        data:{
          token:'e6d34b9ff161424f999441a0734d35d6',
          _:1594893369460
        }
      })
      .then(val => {
        this.data = val.data.datas
        this.swiper_img = this.data.goodsDetail.goodsImageList
      })
    },
  }
};
</script>
<style lang='stylus' scoped>
.header-l 
    display: block;
    width: 0.3rem;
    height: 100%;
    display flex
    align-items center
    position: absolute;
    top: 0;
    left: 0.066rem;
    a
        position: relative;
        z-index: 1;
        display: inline-block;
        i
            display: block;
            width: 100%;
            height: 100%;
            background: url('https://api.10street.cn/wap/images/returnDetail1.png') no-repeat center center;
            background-size: 99%;
        
.header-r
    height 100%
    display flex
    align-items center
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0.088rem;
    font-size: 0;
    text-align: right;
    a
        position: relative;
        z-index: 1;
        display: inline-block;
        vertical-align: top;
        i  
            display: block;
            width: 100%;
            height: 100%;
        .toHome
            background: url('https://api.10street.cn/wap/images/toHome.png') no-repeat center center;
            background-size: 99%;
        .shareDetail
            background: url('https://api.10street.cn/wap/images/toShare.png') no-repeat center center;
            background-size: 99%;

</style>
